Understanding Margin Collapsing in CSS
In CSS, vertical margins of block-level elements can combine (or 'collapse') into a single margin instead of adding up. This happens when the top margin of one element meets the bottom margin of another element, or when an element’s top and bottom margins touch due to empty content or no border/padding in between.
Only vertical margins (top and bottom) collapse; horizontal margins do not.
The resulting margin equals the largest of the two overlapping margins, not their sum.
Margins of parent and first/last child can collapse if no padding, border, or inline content separates them.
Negative margins can affect the collapsed result — they can reduce or even cancel out positive margins.
Adding padding, border, or
overflow: hiddento the container prevents margin collapsing.